<template>
<div>
<div class="text-center pt20 pb20">
	<span v-if="!isCollapsed" class="h2" style="color:#fff;">管理系统</span>
	<span v-else class="h2" style="color:#fff;">网</span>
</div>
<Menu theme="dark" width="auto" :style="{height : offsetheight + 'px', backgroundColor : '#001529'}" >
	<template v-if="!isCollapsed">
		<Submenu 
	    v-for="(item, index) in menuList" :key="index"
	    :name="item.id">
	        <template slot="title">
	            <Icon type="ios-paper" />
	            <span >{{item.name}}</span>
	        </template>
	        <MenuItem 
	        v-for="(item1, index1) in item.children" :key="index1"
	        :name="item1.id" :to="{
				path : item1.href,
			}">
	        	{{item1.name}}
	        </MenuItem>
	    </Submenu>
	</template>
    
	<template v-else>
	    <MenuItem 
	    v-for="(item, index) in menuList" :key="index"
	    :name="item.id" >
	    	<Icon type="ios-paper" />
	    </MenuItem>
    </template>
</Menu>

</div>
</template>

<script>

import { mapGetters } from 'vuex'

export default {
	
	name : 'dlqmenu',
	
	data () {
		return {
		  	offsetheight : document.documentElement.clientHeight,
			offsetwidth : document.documentElement.clientWidth - 240,
		}
	},

	props : {
		isCollapsed: {
			type: Boolean,
		}
	},

	components : {
		
	},

	computed : {
		...mapGetters([
			'menuList', 
		]),

		menuitemClasses: function () {
            return [
                'menu-item',
                this.isCollapsed ? 'collapsed-menu' : ''
            ]
        },
	},

	methods : {
		gogo (item1, item) {
			console.log('giogogogogog');
			console.log(item1);
			console.log(item);
			this.$router.push({
				path : item1.href,
			});
		},
	},

	watch : {
	    
	},

	mounted () {
		
	},

}
</script>

<style scoped>
.layout-con{
    height: 100%;
    width: 100%;
}
.menu-item span{
    display: inline-block;
    overflow: hidden;
    width: 69px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
}
.menu-item i{
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
}
.collapsed-menu span{
    width: 0px;
    transition: width .2s ease;
}
.collapsed-menu i{
    transform: translateX(5px);
    transition: font-size .2s ease .2s, transform .2s ease .2s;
    vertical-align: middle;
    font-size: 22px;
}
</style>
